<template>
  <!-- 学员购买的课程详情弹窗 -->
  <el-dialog v-model="visible" title="购买的课程详情" :close-on-click-modal="false" :close-on-press-escape="false" width="600px">
    <el-table v-loading="dataListLoading" :data="tableList" border style="width: 100%">
      <el-table-column prop="courseName" label="课程名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag type="warning" v-if="scope.row.status == 0">未完课</el-tag>
          <el-tag type="success" v-if="scope.row.status == 1">已完课</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="buyTime" label="购买时间" header-align="center" align="center"></el-table-column>
    </el-table>
    <template v-slot:footer>
      <el-button type="primary" @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick } from "vue";
import baseService from "@/service/baseService";
import { IObject } from "@/types/interface";
import { ElMessage } from "element-plus";

const visible = ref(false);

const dataListLoading = ref<boolean>(false);
const tableList = ref<IObject[]>([]);

const init = async (id: number) => {
  visible.value = true;
  dataListLoading.value = true;
  await getInfo(id);
};

// 获取课程列表
const getInfo = (id: number) => {
  baseService
    .get(`/lingyao/student/getStuBuyCourse`, {
      userId: id
    })
    .then((res) => {
      tableList.value = res.data;
      dataListLoading.value = false;
    })
    .catch(() => {
      dataListLoading.value = false;
    });
};

defineExpose({
  init
});
</script>
